<template>
 <div class="role pd_40">
   <div>
     <p class="mg_b20"><el-button @click="isAddRole(true)" type="primary">添加角色+</el-button></p>
     <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        width="150"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="name"
        width="200"
        label="岗位描述">
      </el-table-column>
      <el-table-column
        width="220"
        prop="address"
        label="创建时间">
      </el-table-column>
      
      <el-table-column
        prop="address"
        width="220"
        label="更新时间">
      </el-table-column>
      <el-table-column
        align="center"
        width="300"
        label="操作">
        <template slot-scope="scope">
          <div class="nowrap">
            <el-button type="primary" @click="distribution" size="mini">权限分配</el-button>
            <el-button @click="deleteOpen" type="primary" size="mini">删除</el-button>
            <el-button @click="isAddRole(false)" type="primary" size="mini">修改</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--分页条-->
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>

  <!--分配权限alert-->
  <el-dialog
    title="分配权限"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <div class="fbc">
      <div class="tree_border fgrow3 fcc">
        <el-tree
          ref="tree1"
          :data="treeList1"
          :default-expand-all="true"
          show-checkbox
          @check="qqq"
          @check-change="treeChange1"
          node-key="id"
          :default-expanded-keys="treeKey1"
          :props="defaultProps">
        </el-tree>
      </div>
      <div class="tree_border fgrow3 fcc">
         <el-tree
            ref="tree2"
            :data="treeList2"
            :default-expand-all="true"
            show-checkbox
            node-key="id"
            :default-expanded-keys="treeKey2"
            :props="defaultProps">
        </el-tree>
      </div>
      <div class="fgrow3 fcc">
        <el-tree
          ref="tree3"
          :data="treeList3"
          :default-expand-all="true"
          show-checkbox
          node-key="id"
          :default-expanded-keys="treeKey3"
          :props="defaultProps">
        </el-tree>
      </div>
       
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="resetTree">重置</el-button>
      <el-button type="primary" size="small" @click="centerDialogVisible=false">确定</el-button>
    </span>
  </el-dialog>

  <!--修改角色alert-->
  <el-dialog
    :title="flag?'添加角色':'修改角色'"
    :visible.sync="moreUsermaAlert"
    width="25%">
    <div class="f_13 mg_r30">
      <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
        <el-form-item label="角色名称" label-width="100px" prop="name"> 
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位描述" label-width="100px" prop="desc">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>    
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="resetForm('form')">重置</el-button>
      <el-button type="primary" size="small" @click="submitForm('form')">确定</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      treeKey1: [], //打开tree的id
      treeKey2: [],
      treeKey3: [],
      flag: false,
      centerDialogVisible: false,  //分配权限
      moreUsermaAlert: false,    //修改角色

      treeList1: [
        { id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',}]}, 
        { id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]},
        {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}
      ],
      treeList2: [
        { id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',}]}, 
        { id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]},
        {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}
      ],
      treeList3: [
        { id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',}]}, 
        { id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]},
        {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}
      ],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {      
        name: '',
        desc: ''
      },
      rules: {    
          name: [
            { required: true, message: '角色名称不能为空', trigger: 'blur' },
          ],
          desc: [
            { required: true, message: '描述不能为空', trigger: 'blur' }
          ],
      },
       
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区 弄'
        }]
    }
  },
  methods: {
    isAddRole(is) {   //点击添加角色/修改
      this.moreUsermaAlert = true;
      if(is) {
        this.flag = true
      }else{
        this.flag = false
      }
    },
    resetTree() {      //重置tree
      this.$refs.tree1.setCheckedKeys(this.treeKey1,false,);
      this.$refs.tree2.setCheckedKeys(this.treeKey2,false,)
      this.$refs.tree3.setCheckedKeys(this.treeKey3,false,)
    },
    qqq(a,b) {
      console.log(a,b)
    },

    treeChange1(a,b,c) {
      // console.log(a,b,c)
    },

    distribution() {       //添加展开id
      this.centerDialogVisible = true;
      // for(let item of this.treeList1) {
      //   this.treeKey1.push(item.id);
      // };
      // this.treeList2.forEach((value,index)=> {
      //   this.treeKey2.push(value.id)
      // });
      // for(let index in this.treeList3) {
      //   this.treeKey3.push(this.treeList3[index].id)
      // }
    },

    deleteOpen() {     //删除角色
      this.$confirm('确定删除角色', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '角色删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },


    submitForm(formName) {    //修改dislog里重置表单
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.moreUsermaAlert = false
            if(this.flag) {
              console.log('tianjia')
            }else{
              console.log('修改')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  
}
</script>
<style scoped lang="less">
  .tree_border {
    border-right: 1px solid #999;
  }
</style>

